<!-- 日 周 月组件  -->
<template>
  <div class="marginL10  box">
    <div class="list" :class="{'act':active==index+1}" @click="checkDate(item.value)" v-for="(item,index) in timeDate" :key="item.value">
      {{ item.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
import {  getDateDay, getWeek, getMonth } from '@/utils/time'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

let active = ref(0)

const props = defineProps({
  index:{
    type:Number,
    default:0
  }
})

active.value = props.index


const emit = defineEmits(['checkDate'])

// let data = reactive<never[]>([])
let data = [] as any[]
const checkDate = (val:number) => {
  active.value = val;
  switch(val) {
    case 1:
      data = [getDateDay(0), getDateDay(0)]
    break
    case 2:
      data = getWeek(0)
    break
    case 3:
      data = getMonth(0)
    break  
  }
  emit('checkDate', data)
}


const timeDate = reactive(
  [{label:t('67'), value: 1},{label:t('68'), value: 2},{label:t('69'), value: 3}]
)

</script>
<style scoped lang="scss">
.box{
  display: flex;
  .list{
    color: var(--text);
    width: 80px;
    text-align: center;
    line-height: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 4px;
    border:1px solid var(--el-color-primary-dark-2);
    font-size: 14px;
    cursor: pointer;
  }
  .act{
    background: var(--el-color-primary-dark-2);
    color: #fff;
  }
}
</style>